<template>
  <div v-loading="fullscreenLoading" class="app-container">
    <el-row>
      <el-col :span="22">
        <el-row>
          <el-text style="margin-right: 5px; text-align: center">开始时间</el-text>
          <el-date-picker v-model="queryParams.starttime" type="datetime" placeholder="选择时间" value-format="YYYY-MM-DD HH:mm:ss" />
          <el-text style="margin-left: 5px; margin-right: 5px; text-align: center"> 结束时间</el-text>
          <el-date-picker
            v-model="queryParams.endtime"
            type="datetime"
            placeholder="选择时间"
            :default-time="defaultTime"
            value-format="YYYY-MM-DD HH:mm:ss" />
          <el-text style="margin-left: 5px; margin-right: 5px; text-align: center">产品型号</el-text>
          <el-select v-model="queryParams.productSpecName" style="width: 280px" filterable clearable>
            <el-option v-for="item in FgcodeOptions" :key="item.productSpecName" :label="item.productSpecName" :value="item.productSpecName" />
          </el-select>
          <el-checkbox v-model="queryParams.checked" label="工单号" style="margin-left: 5px; margin-right: 5px" />
          <el-input v-model="queryParams.productRequestName" style="width: 160px" v-if="queryParams.checked"></el-input>
        </el-row>
      </el-col>
      <el-col :span="2" style="text-align: right">
        <el-text style="width: 10px"> </el-text>
        <el-button type="primary" :icon="Search" @click="submitForm">查询</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 8px">
      <el-table :data="storeDataList" border :span-method="objectSpanMethod">
        <el-table-column prop="productRequestName" label="工单号" align="center" v-if="queryParams.checked" />
        <el-table-column prop="productSpecName" width="400px" label="产品型号" align="center" />
        <el-table-column prop="oldProcessOperationName" label="工序ID" align="center" />
        <el-table-column prop="description" label="工序名称" align="center" />
        <el-table-column prop="position" label="序号" align="center" />
        <el-table-column :label="`数量(${qty})`" :show-overflow-tooltip="true" align="center">
          <template #default="scope">
            <el-link type="primary" @click="showSNData(scope.row)">{{ scope.row.sums }}</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row class="pagination-container">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-sizes="[50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </el-row>
    <!-- 添加sn查询对话框 -->
    <el-dialog v-model="open" draggable width="800px" top="2vh" append-to-body>
      <el-table :data="storeDatasnList" v-loading="snfullscreenLoading" border height="80vh">
        <el-table-column prop="ocId" label="FPC ID 排线码" align="center" />
        <el-table-column prop="moduleId" label="Module ID" align="center" />
        <el-table-column prop="modelSN" label="玻璃码" align="center" />
        <el-table-column prop="customerId" label="客户二维码" align="center" />
        <el-table-column prop="eventTime" label="事件时间" align="center" />
      </el-table>
      <el-row class="pagination-container">
        <el-pagination
          @size-change="snsizeChange"
          @current-change="sncurrentChange"
          :current-page="snpage"
          :page-sizes="[15, 50, 100, 200]"
          :page-size="snpageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sntotal" />
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup name="WIP">
import { ref } from 'vue'
import { stationsOutlist, snlist } from '@/api/infoSerch/stationsOutSerch'
import { Fgcodelist } from '@/api/infoSerch/wipSerch'
import { ElMessage } from 'element-plus'

const defaultTime = ref(new Date())
defaultTime.value = '0000-00-00 23:59:59'
const fullscreenLoading = ref(false)
const snfullscreenLoading = ref(false)
const FgcodeOptions = ref([])
const storeDataList = ref([])
const storeList = ref([])
const storeDatasnList = ref([])
const snList = ref([])
const open = ref(false)
const queryParams = reactive({
  starttime: '',
  endtime: '',
  productRequestName: '',
  productSpecName: '',
  checked: false
})
// 查询sn的参数
const snqueryParams = reactive({
  starttime: '',
  endtime: '',
  productRequestName: '',
  productSpecName: '',
  oldProcessOperationName: ''
})
// 分页栏中的数据条数
const total = ref(0)
// 分页栏选中的页数
const page = ref(1)
// 每页显示的数据量
const pageSize = ref(50)
//总量
const qty = ref(0)
// sn分页栏中的数据条数
const sntotal = ref(0)
// sn分页栏选中的页数
const snpage = ref(1)
// sn每页显示的数据量
const snpageSize = ref(15)

function getFgcodeList() {
  Fgcodelist().then((res) => {
    FgcodeOptions.value = res.data
  })
}
// 点击查询
function submitForm() {
  if (!queryParams.starttime || !queryParams.endtime || queryParams.starttime > queryParams.endtime) {
    ElMessage({
      message: '请选择正确的时间范围',
      type: 'error'
    })
    return
  }
  // console.log(queryParams)
  fullscreenLoading.value = true
  storeDataList.value = []
  // 去除前后部分空格
  queryParams.productRequestName = queryParams.productRequestName.trim()
  stationsOutlist({ ...queryParams }).then((res) => {
    // 获得数据条数
    total.value = res.data.list.length
    // 暂存数据
    storeList.value = res.data.list
    qty.value = res.data.qty
    getTableData()
  })
}
// 获得的数据导入表格
function getTableData() {
  storeDataList.value = storeList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
  fullscreenLoading.value = false
}
// val为分页栏中选中的页数
function currentChange(val) {
  // console.log(val)
  page.value = val
  getTableData()
}
// val为分页栏中选中的每页数据量
function sizeChange(val) {
  pageSize.value = val
  page.value = 1 // 切换每页数据量时，重置为第一页
  getTableData()
}
// 获得的sn数据导入表格
function getSNTableData() {
  storeDatasnList.value = snList.value.slice((snpage.value - 1) * snpageSize.value, snpage.value * snpageSize.value)
  snfullscreenLoading.value = false
}
// val为sn分页栏中选中的页数
function sncurrentChange(val) {
  // console.log(val)
  snpage.value = val
  getSNTableData()
}
// val为sn分页栏中选中的每页数据量
function snsizeChange(val) {
  snpageSize.value = val
  snpage.value = 1 // 切换每页数据量时，重置为第一页
  getSNTableData()
}
// 点击数量查询sn
function showSNData(row) {
  open.value = true
  //清空表格
  storeDatasnList.value = []
  //loading展示
  snfullscreenLoading.value = true
  snqueryParams.starttime = queryParams.starttime
  snqueryParams.endtime = queryParams.endtime
  snqueryParams.productRequestName = row.productRequestName
  snqueryParams.productSpecName = row.productSpecName
  snqueryParams.oldProcessOperationName = row.oldProcessOperationName
  snlist({ ...snqueryParams }).then((res) => {
    // 获得数据条数
    sntotal.value = res.data.length
    // 暂存数据
    snList.value = res.data
    getSNTableData()
  })
}

// 定义 span-method 函数
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (column.property == 'productSpecName') {
    const mergedMap = {} // 用于存储已合并的行信息
    for (let i = 0; i < storeDataList.value.length; i++) {
      if (mergedMap[i]) continue // 如果该行已被合并，跳过
      let rownum = 1 // 初始化合并行数
      for (let j = i + 1; j < storeDataList.value.length; j++) {
        if (storeDataList.value[i].productSpecName === storeDataList.value[j].productSpecName) {
          rownum++ // 合并行数加1
          mergedMap[j] = true // 标记该行为已合并
        } else {
          break // 遇到不同值时停止查找
        }
      }
      if (rowIndex === i) {
        return { rowspan: rownum, colspan: 1 } // 返回合并信息
      } else if (mergedMap[rowIndex]) {
        return { rowspan: 0, colspan: 0 } // 已合并的行不显示
      }
    }
  }
}
// 获得fgcode列表
getFgcodeList()
//监听checked，没被选中时清空输入框内容
watch(
  () => {
    return queryParams.checked
  },
  () => {
    if (!queryParams.checked) {
      queryParams.productRequestName = ''
    }
  }
)
</script>
<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  margin-top: 8px;
}
</style>